<template>
	<view class="mainbgc" v-if="pageShow">
		<header-top :messageInfo="{typeFlag:true,message:'客户管理'}">
			<view class="rightmsg" slot="rightmsg">
				<view class="rightmsg_content">
					<view class="add" @click="jumpurl('/pages/customerregist/customerregist')"></view>
				</view>
			</view>
		</header-top>
		<!-- 顶部筛选 -->
		<view class="ffffff flexbetween strongtext mainpadding">
			<view class="inputsearch">
				<input type="text" placeholder="请输入搜索内容" v-model="keywords" confirm-type="search" @confirm="init">
			</view>
			<view class="focus" @click="show=true">筛选</view>
		</view>
		<view class="content_top flexbetween">
			<view class="margin_top">
				当前客户：<text style="color: #3476fe;">{{contentall.total_kehu_num}}</text>
			</view>
			<view class="margin_top">
				已成交：<text style="color: green;">{{contentall.cj_kehu_num}}</text>
			</view>
			<view class="margin_top">
				未成交：<text style="color: red;">{{contentall.wcj_kehu_num}}</text>
			</view>
		</view>
		<view class="content">
			<!-- 点击跳转详情 -->
			<view class="flexcenter" v-if="!list.data.length">
				<view class="placeholderimg"></view>
			</view>
			<view class="right-content ffffff margin_top radius mainpadding" @click="jumpurldetail(item.id)"
				v-for="item in list.data" :key="item.id">
				<view class="flexbetween">
					<view class="strongtext yihang textleft width300">{{item.khname}}<text
							class="smalltext">（{{item.name}}）</text></view>
					
				</view>
				<view class="flexbetween margin_top">
					<view class="yihang textleft width300">
						意向度：<text class="strongtext">{{item.intention.name}}</text>
					</view>
					<view class="yihang textright width300">
						姓名：<text class="strongtext">{{item.khname}}</text>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="yihang textleft width300">
						规模等级：<text class="strongtext">{{item.scalelevel.name}}</text>
					</view>
					<view class="yihang textright width300">
						行业：<text class="strongtext">{{item.industry.name || ""}}</text>
					</view>
				</view>
				<view class="flexbetween margin_top">
					<view class="flexleft white_nowrap" @click.stop="phone(item.tel)">电话：<view
							class="strongtext flexleft">
							{{item.tel}}
							<view class="callphone"></view>
						</view>
					</view>
					<view class=" yihang textright width300">
						经营区域：<text class="strongtext">{{item.jyqy || ""}}</text>
					</view>
				</view>
				<view class="margin_top">
					<view class="flexleft">
						<view class="white_nowrap">客户地址：</view>
						<view class="flexleft" @click.stop="openlocation(item)">
							<view class="strongtext yihang" style="width: 350rpx;">
								{{item.cityinfo}}{{item.address_detail}}
							</view>
							<view class="addressicon"></view>
						</view>
					</view>
				</view>
				<view class="margin_top">
					<view class="flexbetween">
						<view class="yihang width300">
							套餐：<text class="strongtext">{{item.thaliinfo.thali_name || ""}}</text>
						</view>
						<view class="yihang textright width300">
							到期天数：<text class="strongtext" style="color: red;">{{item.end_days}}天</text>
						</view>
					</view>
				</view>
				<view class="flexright margin_top">
					<view class="margin_right6 paybtn" @click.stop="jumpurlpay(item.id)">支付套餐</view>
					<view class="editbtn" @click.stop="jumpurledior(item.id)">编辑</view>
				</view>
			</view>
		</view>
		<u-popup round="20" :show="show" @close="show=false">
			<view class="mainpadding">
				<view class="flexcenter">
					<view class="titletext">筛选</view>
				</view>
				<view class="strongtext margin_top">自定义时间</view>
				<view class="flexleft">
					<view class="inputscreenbox flexcenter" @click="shows=true">
						<input class="itemscreen margin_top" placeholder="开始时间" type="text" disabled v-model="start">
					</view>
					<view class="zwscreenbox flexcenter">
						<view class="strongtext">-</view>
					</view>
					<view class="inputscreenbox flexcenter" @click="showss=true">
						<input class="itemscreen margin_top" placeholder="结束时间" type="text" disabled v-model="end">
					</view>
				</view>
			</view>
			<view class="flexbetween mainpadding" @click="yxdshow = true">
				<view class="flexleft">
					<view class="strongtext white_nowrap">意向度：</view>
					<input type="text" placeholder="请选择意向度" disabled="" v-model="yxd">
				</view>
				<u-icon name="arrow-right" size="18"></u-icon>
			</view>
			<view class="flexbetween mainpadding" @click="hyshow = true">
				<view class="flexleft">
					<view class="strongtext white_nowrap">行业：</view>
					<input type="text" placeholder="请选择行业" disabled="" v-model="hy">
				</view>
				<u-icon name="arrow-right" size="18"></u-icon>
			</view>
			<view class="flexbetween mainpadding" @click="tcshow = true">
				<view class="flexleft">
					<view class="strongtext white_nowrap">套餐：</view>
					<input type="text" placeholder="请选择套餐" disabled="" v-model="tc">
				</view>
				<u-icon name="arrow-right" size="18"></u-icon>
			</view>
			<view class="flexbetween mainpadding">
				<view class="surebtn reset flexcenter" style="margin-top: 60rpx;" @click="resetbtn">重置</view>
				<view class="surebtn flexcenter" style="margin-top: 60rpx;" @click="sureBtn">确认</view>
			</view>
		</u-popup>
		<!-- 开始结束时间 -->
		<u-datetime-picker :show="shows" v-model="value1" mode="date" @confirm="confirm" @cancel="shows=false"
			:closeOnClickOverlay="true" @close="shows=false"></u-datetime-picker>
		<u-datetime-picker :show="showss" v-model="value2" mode="date" @confirm="confirms" @cancel="showss=false"
			:minDate="mintime" :closeOnClickOverlay="true" @close="showss=false"></u-datetime-picker>
		<!-- 行业 -->
		<u-picker :show="hyshow" keyName="name" :columns="hycolumns" title="选择行业" @confirm="hyconfirm"
			@cancel="hyshow=false"></u-picker>
		<!-- 意向度 -->
		<u-picker :show="yxdshow" keyName="name" :columns="yxdcolumns" title="选择意向度" @confirm="yxdconfirm"
			@cancel="yxdshow=false"></u-picker>
		<!-- 套餐 -->
		<u-picker :show="tcshow" keyName="name" :columns="tccolumns" title="选择套餐" @confirm="tcconfirm"
			@cancel="tcshow=false"></u-picker>
	</view>
</template>

<script>
	const httpRequest = require("@/common/httpRequest.js")
	export default {
		data() {
			return {
				// 筛选弹出层
				show: false,
				// 时间选择
				start: '',
				end: '',
				shows: false,
				showss: false,
				value1: Number(new Date()),
				value2: Number(new Date()),
				mintime: Number(new Date()),
				maxtime: Number(new Date()),
				// 意向度
				yxd: "", //意向度
				yxdshow: false,
				yxdcolumns: [],
				yxdid: "",
				// 行业
				hy: "",
				hyshow: false,
				hycolumns: [],
				hyid: "",
				// 套餐
				tc: "",
				tcshow: false,
				tccolumns: [],
				tcid: "",
				// 总数据
				contentall: {
					cj_kehu_num: 0,
					total_kehu_num: 0,
					wcj_kehu_num: 0,
				},
				keywords: "",
				// 分页处理数据
				page: 1,
				limit: 12,
				list: {
					data: [{}]
				},
				pageShow: false
			}
		},
		onLoad() {
			this.getscreen()
		},
		onShow() {
			this.init()
			this.getmsg()
		},
		methods: {
			confirm(e) {
				console.log(e);
				this.shows = false;
				this.show = true;
				this.end = '';
				this.mintime = e.value;
				this.start = this.date(e.value);
				this.currents = -1;
			},
			confirms(e) {
				this.showss = false;
				this.show = true;
				this.maxtime = e.value;
				this.end = this.date(e.value);
				this.currents = -1;
			},
			date(timer) {
				var date = new Date(timer); //当前时间
				var year = date.getFullYear() //返回指定日期的年份
				var month = repair(date.getMonth() + 1); //月
				var day = repair(date.getDate()); //日
				var curTime = year + "-" + month + "-" + day

				function repair(i) {
					if (i >= 0 && i <= 9) {
						return "0" + i;
					} else {
						return i;
					}
				}
				return curTime
			},
			sureBtn() {
				this.show = false
				this.init()
				this.getmsg()
			},
			// 重置
			resetbtn() {
				this.start = ""
				this.end = ""
				this.yxdid = ""
				this.yxd = ""
				this.hy = ""
				this.hyid = ""
				this.tc = ""
				this.tcid = ""
				this.init()
				this.getmsg()
				this.show = false
			},
			getmsg() {
				let _this = this;
				httpRequest.request('/employeesapi/shop/shopData', 'GET', {
					start_time: _this.start, //时间
					end_time: _this.end, //时间
					keywords: _this.keywords, //关键字
					intention_id: _this.yxdid, //意向度
					thali_id: _this.tcid, //套餐id
					industry_id: _this.hyid //行业id
				}, false, false, true).then(res => {
					this.contentall = res.data
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			// 热门推荐列表
			init(isPage, page) {
				let _this = this;
				httpRequest.request('/employeesapi/shop/shopList', 'GET', {
					page: page || 1,
					limit: _this.limit,
					start_time: _this.start, //时间
					end_time: _this.end, //时间
					keywords: _this.keywords, //关键字
					intention_id: _this.yxdid, //意向度
					thali_id: _this.tcid, //套餐id
					industry_id: _this.hyid //行业id
				}, false, false, true).then(res => {
					if (res.code == 1) {
						let resList = res.data;
						let dataList = _this.list;
						if (isPage == true) {
							_this.list.data = dataList.data.concat(resList.data);
						} else {
							this.list = res.data
							_this.list.data = resList.data;
						}
						_this.pageShow = true
					}
				}).catch(err => {
					httpRequest.toast(err.msg);
				})
			},
			onReachBottom() {
				let _this = this;
				let list = _this.list;
				let page = _this.page;
				if (list.last_page <= page) {
					return false;
				}
				page++;
				_this.page = page;
				_this.init(true, page);
			},
			getscreen() {
				this.gethy() //行业
				this.getyxd() //意向度
				this.gettc() //套餐
			},
			// 获取行业
			gethy() {
				httpRequest.request('/employeesapi/index/getindustry', 'POST', {}).then(res => {
					this.hycolumns.push(res.data)
				})
			},
			// 获取意向度
			getyxd() {
				httpRequest.request('/employeesapi/index/getintention', 'POST', {}).then(res => {
					this.yxdcolumns.push(res.data)
				})
			},
			// 获取套餐
			gettc() {
				httpRequest.request('/employeesapi/index/getthali', 'POST', {}).then(res => {
					this.tccolumns.push(res.data)
				})
			},
			// 意向度确定
			yxdconfirm(e) {
				this.yxdshow = false
				this.yxdid = e.value[0].id
				this.yxd = e.value[0].name
			},
			// 行业确认
			hyconfirm(e) {
				this.hyshow = false
				this.hyid = e.value[0].id
				this.hy = e.value[0].name
			},
			// 套餐确认
			tcconfirm(e) {
				this.tcshow = false
				this.tcid = e.value[0].id
				this.tc = e.value[0].name
			},
			jumpurldetail(id) {
				uni.navigateTo({
					url: '/pages/customerdetail/customerdetail?id=' + id
				})
			},
			jumpurledior(id) {
				uni.navigateTo({
					url: '/pages/customerregist/customerregist?id=' + id
				})
			},
			jumpurlpay(id) {
				uni.navigateTo({
					url: '/pages/taocanzf/taocanzf?id=' + id
				})
			},
			jumpurl(url) {
				uni.navigateTo({
					url: url
				})
			},
			openlocation(item) {
				uni.openLocation({
					latitude: Number(item.latitude), //即将传到高德或腾讯地图的终点纬度  必须是数值，字符串无效
					longitude: Number(item.longitude), //即将传到高德或腾讯地图的终点经度  必须是数值，字符串无效
					name: item.name, //即将传到高德或腾讯地图的店铺名称
					address: item.cityinfo + item.address_detail, //即将传到高德或腾讯地图的详细地址
					scale: 18
				})
			},
			// 打电话
			phone(p) {
				uni.makePhoneCall({
					phoneNumber: p.toString()
				}).catch((e) => {
					// console.log(e)  //用catch(e)来捕获错误{makePhoneCall:fail cancel}
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.paybtn {
		padding: 10rpx 40rpx;
		color: #fff;
		border: 1rpx solid #3476fe;
		background-color: #3476fe;
		border-radius: 50rpx;
		font-size: 36rpx;
	}
	.editbtn {
		padding: 10rpx 40rpx;
		color: #3476fe;
		border: 1rpx solid #3476fe;
		// border: 1rpx solid #2C5FAE;
		border-radius: 50rpx;
		font-size: 36rpx;
	}
	.right-content {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.strongtext {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.smalltext {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
	}

	.content_top {
		font-size: 30rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #999999;
		flex-wrap: wrap;
		padding: 0 30rpx;
	}

	.content {
		padding: 0rpx 10rpx 30rpx;
	}

	.margin_right {
		margin-right: 10rpx;
	}
</style>